<template>
  <el-drawer direction="rtl" :visible="openView" :before-close="onCloseView" :show-close="false" size="450px" :with-header="false">
    <!-- 磁盘信息 -->
    <el-descriptions title="磁盘信息" :column="1" border class="descriptions-container">
      <el-descriptions-item label="磁盘名称">{{ disk.diskName }}</el-descriptions-item>
      <el-descriptions-item label="磁盘路径">{{ disk.diskPath }}</el-descriptions-item>
      <el-descriptions-item label="磁盘大小">{{ disk.total }}</el-descriptions-item>
      <el-descriptions-item label="已用大小">{{ disk.used }}</el-descriptions-item>
      <el-descriptions-item label="可用大小">{{ disk.free }}</el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script>
export default {
  name: 'ViewDrawer',

  data () {
    return {
      // 操作信息参数
      disk: {},
      // 是否打开对话框
      openView: false
    }
  },

  methods: {
    // 打开抽屉
    handleView (disk) {
      this.openView = true
      this.disk = disk
    },
    // 关闭抽屉
    onCloseView () {
      this.openView = false
    }
  }
}
</script>

<style lang="scss" scoped>
.descriptions-container {
  padding: 1.5rem;
}
.el-divider {
  margin: 1rem 0;
}
.dot-success {
  background: #1890ff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 0.5rem;
}
.dot-danger {
  background: red;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 0.5rem;
}
</style>
